<template>
	<!-- prop是自定义的数据字段名，要与chang后的保持一致，h2cRender是renderjs的module名称 -->
	<view class="sp-html2canvas-render" :prop="domId" :change:prop="h2cRender.watchDomId">
		<slot></slot>
		<text :prop="expOver" :change:prop="h2cRender.watchExpOver"></text>
	</view>
</template>

<script>
	export default {
		props: {
			// 要渲染dom的id
			domId: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				expOver: 0,
				// #ifdef VUE2
				// #ifdef APP
				// 只有在Vue2的APP真机中需要先声明h2cRender，否则会报错，若未报错建议删除此处代码
				h2cRender: null
				// #endif
				// #endif
			}
		},
		methods: {
			renderOver(e) {
				// 监听渲染生成完成
				this.$emit('renderOver', e)
			},
			h2cRenderDom() {
				// #ifdef H5
				this.renderDom()
				// #endif
				// #ifndef H5
				// 控制expOver变量改变以触发RenderJs中渲染方法。
				this.expOver++
				// 处理你自己的逻辑.....
				// #endif
			}
		}
	}
</script>

<!-- renderjs目前仅支持内联使用 -->
<script module="h2cRender" lang="renderjs">
	// import html2canvas from 'html2canvas';
	export default {
		data() {
			return {
				domIdValue: ''
			}
		},
		methods: {
			async renderDom() {
				// app无法通过传参获取domId,也无法直接获取到script中data或props数据
				// 必须通过特定的监听方式,与script通信,获取其data
				try {
					const el = document.getElementById(this.domIdValue);
					// const canvas = await html2canvas(el, {
					// 	width: el.offsetWidth,
					// 	height: el.offsetHeight,
					//       x: 0,
					//       y: 0,
					// 	logging: true,
					// 	useCORS: true,
					//       allowTaint: true,
					// 	scale: 2, // 2倍，增强清晰度
					// });
					// const base64 = canvas.toDataURL('image/jpeg', 1);
					// this.$ownerInstance.callMethod('renderOver', base64);
				} catch (err) {
					console.log('==== err :', err.message);
				}
			},
			// 监听方式,与script通信,获取其data
			watchDomId(newValue, oldValue, ownerInstance, instance) {
				this.domIdValue = newValue
			},
			watchExpOver(newValue, oldValue, ownerInstance, instance) {
				if (newValue !== 0) {
					// 初始不做监听，避免默认第一次就自动渲染
					this.renderDom()
				}
			}
		}
	}
</script>

<style>
	.sp-html2canvas-render {
		position: relative;
	}
</style>